<template>
	<view class="index-wrap">
		<view class="index-wxml">
			<index-header :swiperList="swiperList" :showHot="showHot" @changeTab='changeTab'
				:changeColor="changeColor"></index-header>
			<view v-show="showHot">
				<film-swiper @closeMask="closeMask" :slideToCode="slideToCode"></film-swiper>
				<view class="scroll-ads" :style="{marginTop:titleBarHeight+statusBarHeight+105+'px'}">
					<u-icon name="volume-fill" color='#DD524D' />
					<swiper autoplay="true" scroll-y vertical="true" circular :interval="4000" class="ads">
						<swiper-item v-for="(item,index) in adList" :key="index">
							<view class="ads-item">
								{{item}}
							</view>
						</swiper-item>
					</swiper>
					<view style="display: flex;" @click="call">

						<text style="margin-right: 5rpx;">热线客服</text>
						<u-icon name="phone" color="#DD524D" size="18"></u-icon>

					</view>
				</view>
				<!-- 				<view :style="{marginTop:titleBarHeight+statusBarHeight+100+'px'}">
					
				</view> -->
				<view class="call-cinema" @click="call">

				</view>
				<film-session @getFutureFilm='getFutureFilm'></film-session>
			</view>
			<view v-show="!showHot" class="future-films-box">

				<view class="future-films" :class="futureFilmIndex==index?'active-film':''"
					v-for="(item,index) in futureFilm" :key="index" @click="toDetail(item,index)"
					@touchstart='()=>touchstart(index)' @touchend='touchend'>
					<view style="border-bottom: 1px solid #f0f0f5;">
						<view class="open-date">
							全国公映：{{item.PublishDate}}
						</view>
						<view class="film-info">
							<view>
								<img class="film-img" :src="item.Imageurl" alt="">
							</view>
							<view class="">
								<view class="film-name">
									{{item.FilmName}}
								</view>
								<view class="desc">
									{{item.Language}}/{{item.Duration}}分钟
								</view>
								<view class="desc">
									{{item.showType}}
								</view>
								<view class="desc">
									导演：{{item.Director}}
								</view>
								<view class="desc">
									演员：{{item.Cast}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading-mask" v-show="showMask"></view>
			<u-popup :show="showTips" mode="center" :round='10'>
				<view class="tips">
					<image :src="tipImg" mode="widthFix"></image>
					<u-button type="primary" shape='circle' style="width: 200rpx;"
						@click="showTips=false">我知道了</u-button>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import {
		getCardList,
		getCinemaConfig,
		getCinemaInfo
	} from '../../common/http/api.js';
	import FilmSwiper from '../../components/index/FilmSwiper.vue'
	import IndexHeader from '../../components/index/IndexHeader.vue'
	import FilmSession from '../../components/index/FilmSession.vue'
	import moment from 'moment';
	export default {
		components: {
			FilmSwiper,
			IndexHeader,
			FilmSession,

		},
		data() {
			return {
				name: '',
				showBtn: false,
				showMask: true,
				cinemaInfo: {},
				swiperList: [],
				chainsList: [],
				showTips: false,
				tipImg: '',
				titleBarHeight: '',
				statusBarHeight: '',
				adList: [],
				showHot: true,
				futureFilm: [],
				futureFilmIndex: null,
				changeColor: false,
				slideToCode: '',
				showMore: true,
				cinemaTel: ''
			}
		},
		methods: {
			changeTab(v) {
				this.showHot = v
			},
			touchstart(index) {
				this.futureFilmIndex = index
			},
			touchend() {
				this.futureFilmIndex = null
			},
			toDetail(item) {
				// uni.navigateTo({
				// 	url: "../../pages/filmInfo/filmInfo"
				// })
				// this.$store.commit('setFilmInfo', item)

				this.slideToCode = item.FilmCode
				this.showHot = !this.showHot

				setTimeout(() => {
					this.slideToCode = ''
				}, 500)
			},
			getInfo() {
				getCinemaInfo().then(res => {
					this.cinemaTel = res.cinemaPhone
					uni.setStorageSync('cinemaPhone', res.cinemaPhone)
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.cinemaTel,
					fail: e => {
						console.log(e);
					}
				})
			},
			toMember() {
				getCardList(uni.getStorageSync("openId")).then(res => {
					const {
						code,
						data
					} = res
					if (code === "000") {

						uni.navigateTo({
							url: "../cardList/cardList"
						})

					} else if (code === "001") {
						uni.navigateTo({
							url: "../openCard/openCardList"
						})
					}
				})
			},
			getFutureFilm(films) {
				this.futureFilm = films
				console.log(this.futureFilm);
			},
			getConfig() {
				getCinemaConfig().then(res => {
					const {
						data,
						code
					} = res;
					if (code == "SUCCESS") {
						this.cinemaInfo = data
						this.$store.commit("setCinemaConfig", data);
						const list = []
						// this.swiperList.push(data.picture1, data.picture2, data.picture3)
						for (let key in data) {
							if (key.includes('picture') && !key.includes('dy')) {
								this.swiperList.push(data[key])
							}
							if (key.includes('picture') && key.includes('dy')) {

								list.push(data[key])
							}
						}
						uni.setStorageSync('licenseList', list)
						this.tipImg = data.homeImage
						this.adList = data.rollAds.split('|')

					}
				})
			},
			closeMask() {
				this.showMask = false;
				this.handleTipTime();
			},
			handleTipTime() {
				const time = parseInt(uni.getStorageSync('tipTime'));
				const currentTime = new Date().getTime()
				if (!time) {
					this.showTips = true;
					uni.setStorageSync('tipTime', currentTime)
					setTimeout(() => this.showTips = false, 10000)
				} else {
					const result = currentTime - time;

					if (result > 300000) {
						this.showTips = true;
						uni.setStorageSync('tipTime', currentTime)
						setTimeout(() => this.showTips = false, 10000)
					} else {
						this.showTips = false;
					}
				}
			},


		},
		onLoad(options) {

			if (options.cinemaCode) {
				uni.setStorageSync('cinemaCode', options.cinemaCode)
				uni.setStorageSync('currentCityName', options.currentCity)
			}
			console.log(options);

			if (options.scene) {
				uni.setStorageSync('distributorId', options.scene)

			}
			this.getInfo()


			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			this.getConfig();

			uni.$once('sysHeight', data => {
				this.titleBarHeight = data.titleBarHeight
				this.statusBarHeight = data.statusBarHeight
			})
		},
		onShareAppMessage() {
			const cinemaCode = uni.getStorageSync('cinemaCode', cinema.cinemaCode)
			const currentCityName = uni.getStorageSync('cinemaCode', cinema.currentCityName)
			return {
				path: `/pages/index/index?cinemaCode=${cinemaCode}&currentCityName=${currentCityName}`
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 135) {
				this.changeColor = true
			} else {
				this.changeColor = false
			}
		}
	}
</script>

<style lang="scss">
	.coustom-navbar {
		display: flex;
		justify-content: center;
	}

	.call-cinema {
		// background-color: #fff;
		padding: 10rpx 40rpx;
		font-size: 24rpx;

		color: #fa5869;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.core {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 20rpx 20rpx 20rpx;
		border-color: transparent transparent rgba(0, 0, 0, .5) transparent;
		position: fixed;
		top: 0;
		right: 100rpx;
		z-index: 999;
	}

	.more-tips {
		position: fixed;
		padding: 0rpx 15rpx;
		border-radius: 30rpx;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9999;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
		right: 10rpx;
		top: 20rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}

	}

	.future-films-box {
		position: absolute;
		z-index: 9;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		top: 160px;
	}

	.film-box {
		position: fixed;
		top: 300rpx;
	}

	.loading-mask {
		width: 100vw;
		height: 100vh;
		background-color: #f0f0f5;
		position: absolute;
		left: 0;
		top: 0;
	}

	.future-films {

		padding: 5rpx 40rpx 5rpx 40rpx;



		.film-info {
			display: flex;
			margin-bottom: 20rpx;

			.film-name {
				padding-top: 5rpx;
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}

			.desc {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 5rpx;
			}
		}

		.open-date {
			padding: 20rpx 0;
			font-size: 26rpx;
		}

		.film-img {
			width: 150rpx;
			height: 210rpx;
			margin-right: 20rpx;
			border-radius: 15rpx;
		}
	}

	.active-film {
		background-color: #f0f0f5;
	}

	.open-card-tip {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		background-color: #f0f0f5;
		font-size: 28rpx;
		color: #DD524D;


		view {
			display: flex;
			align-items: center;
		}

		text {
			margin: 0 15rpx;
		}
	}

	.tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 15rpx;
		padding-bottom: 20rpx;

		image {
			width: 75vw;
			margin-bottom: 20rpx;
		}

		.confirm {
			width: 300rpx;
			font-size: 32rpx;

		}
	}

	.scroll-ads {
		display: flex;
		padding: 10rpx 30rpx;
		background-color: #f0f0f5;
		color: #DD524D;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;

		.ads {
			height: 60rpx;
			width: 60vw;
			margin-left: 20rpx;
			display: flex;


			.ads-item {
				height: 60rpx;
				display: flex;
				font-weight: bold;
				display: flex;
				align-items: center;

			}
		}
	}
</style>